<template>
	<view>
		<!-- 顶部导航栏 -->
		<u-navbar :is-back="false" title="" :background="{ 'background': '#FFFFFF' }">
			<view class="slot-wrap">
				<image src="/static/right.png" class="right" @click="back()" ></image>
				<view class="top-title">
					<text style="margin-left: 80rpx;">创建群组</text> 
					<!-- <text style="font-weight: 400;font-size: 20rpx;color: #919191;margin-left: 80rpx;">10名群成员</text> -->
				</view>
			</view>
			<view slot="right">
				<view class="flexalign" style="font-weight: 500;font-size: 32rpx;color: #0052D9;margin-right: 32rpx;" @click="redirectTo('/pages3/message/message')">
					创建
				</view>
			</view>
		</u-navbar>
		
		<view class="allwrap">
			<view style="position: fixed;width: 686rpx;z-index: 10;margin-top: 10rpx;">
			<u-search placeholder="搜索手机号/邮箱/账号添加" v-model="keyword" :show-action="false" :height="68"></u-search>
			</view>
			<view style="height:70rpx;"></view>
			<view class="flexal" style="margin-top: 32rpx;" v-for="(item,index) in list" :key="index">
				<image :src="item.avatar" class="img"></image>
				<view class="text flexal">
				<text >{{item.name}}</text>
				</view>
				<u-checkbox
					@change="checkboxChange" 
					v-model="item.checked" 
					:name="index"
					:shape="'circle'"
				></u-checkbox>
			</view>
			
		</view>
		<!-- 电话提示滑动快 -->
		<movablearea1 :movaheight="movaheightAll" v-if="movableareaShow" @editMovaheightAll="editMovaheightAll" :movaTop="movaTopAll"></movablearea1>
	</view>
</template>

<script>
	// import peopleVue from '../../components/people/people.vue'
	export default {
		data() {
			return {
				type:1,
				// 组织成员
				 list:[
					{
						name:'王小二',
						avatar:'https://cdn.uviewui.com/uview/album/1.jpg',
						checked:true
					},
					{
						name:'王小明',
						avatar:'https://cdn.uviewui.com/uview/album/2.jpg',
						checked:true
					},
					{
						name:'李二',
						avatar:'https://cdn.uviewui.com/uview/album/3.jpg',
						checked:false
					},
					{
						name:'张三',
						avatar:'https://cdn.uviewui.com/uview/album/4.jpg',
						checked:false
					},
					{
						name:'老四',
						avatar:'https://cdn.uviewui.com/uview/album/5.jpg',
						checked:false
					},
					{
						name:'王五',
						avatar:'https://cdn.uviewui.com/uview/album/6.jpg',
						checked:false
					},
					{
						name:'老六',
						avatar:'https://cdn.uviewui.com/uview/album/7.jpg',
						checked:false
					},
					{
						name:'老王',
						avatar:'https://cdn.uviewui.com/uview/album/8.jpg',
						checked:false
					},
					{
						name:'老李',
						avatar:'https://cdn.uviewui.com/uview/album/9.jpg',
						checked:false
					},
				],
			}
		},
		components:{
			// peopleVue
		},
		methods: {
			checkboxChange(e){
				this.list[e.name].checked = e.value
			}
		}
	}
</script>

<style lang="less">
	.slot-wrap {
			display: flex;
			align-items: center;
			/* 如果您想让slot内容占满整个导航栏的宽度 */
			/* flex: 1; */
			/* 如果您想让slot内容与导航栏左右有空隙 */
			/* padding: 0 30rpx; */
			.right{
				width: 18rpx;
				height: 34rpx;
				transform: rotate(180deg); 
				margin-left: 34rpx;
			}
			.top-title{
				flex: 1;
				display: flex;
				flex-direction: column;
				width: 530rpx;
				font-weight: normal;
				font-size: 36rpx;
				color: #000000;
				text-align: center;
			}
		}
	.img{
		width: 100rpx;
		height: 100rpx;
		// background: #888888;
		border-radius: 50%;
	}

	.text{
		margin-left: 24rpx;
		flex: 1;
		font-weight: 500;
		font-size: 32rpx;
		color: #333333;
	}
</style>
